<!DOCTYPE html>
<html>
	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>黑马面面</title>
		<meta name="description" content="黑马面面">
		<meta name="keywords" content="黑马面面">
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../css/element-ui.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
	</head>

	<body class="hold-transition">
		<div id="app">
			<div class="content-header common-search-border1">
				<el-button class="butAdd" @click="handleCreate"><i class="fa fa-plus" aria-hidden="true"></i> 新增学科</el-button>
			</div>
			<div class="app-container">
				<div class="box common-search-border2">
					<div class="filter-container">
						<!-- 搜索栏 -->
						<el-form :inline="true" :model="requestParameters" ref="requestParameters" class="formInfo" label-width="70px">
							<el-form-item label="学科名称" prop="name">
								<el-input placeholder="请输入" v-model="requestParameters.name" style="width: 200px;" class="filter-item"></el-input>
							</el-form-item>
							<el-form-item label="是否显示" prop="status">
								<el-select placeholder="请选择" v-model="requestParameters.status">
									<el-option :key="item.id" :label="item.value" :value="item.id" v-for="item in baseData.isShow"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-button @click="handleRest">清除</el-button>
								<el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<div class="box common-table-border" style="margin:8px 0 0;">
					<el-table :data="items" fit highlight-current-row style="width: 100%;">
						<el-table-column label="序号" align="center" width="50px">
							<template slot-scope="scope">
								<span>{{ scope.$index+1 }}</span>
							</template>
						</el-table-column>
						<el-table-column label="学科名称" align="center">
							<template slot-scope="scope">
								<span class="link-type">{{ scope.row.name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建者" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.creator }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建日期" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.createDate | dateTransform }}</span>
							</template>
						</el-table-column>
						<el-table-column label="前台是否显示" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.isShow === 0 ? '是': '否' }}</span>
							</template>
						</el-table-column>
						<el-table-column label="二级目录" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.catalogQty }}</span>
							</template>
						</el-table-column>
						<el-table-column label="标签" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.tagQty }}</span>
							</template>
						</el-table-column>
						<el-table-column label="题目数量" align="center">
							<template slot-scope="scope">
								<span>{{ scope.row.questionQty }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400px">
							<template slot-scope="scope">
								<div class="operation">
									<el-button type="primary" size="mini" @click="goToCatalogView(scope.row)"><i class="fa fa-superpowers"
										 aria-hidden="true"></i> 学科目录
									</el-button>
									<el-button type="primary" size="mini" @click="goToTagView(scope.row)"><i class="fa fa-superpowers" aria-hidden="true"></i>
										学科标签
									</el-button>
									<el-button type="primary" size="mini" @click="handleUpdate(scope.row)"><i class="fa fa-pencil-square-o"
										 aria-hidden="true"></i> 修改
									</el-button>
									<el-button size="mini" type="danger" @click="handleDeleted(scope.row)"><i class="fa fa-trash-o" aria-hidden="true"></i>
										删除
									</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-container">
						<el-pagination class="pagiantion" v-show="pagination.total>0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						 :current-page="pagination.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
						 :total="pagination.total">
						</el-pagination>
					</div>
				</div>
				<!-- 新增学科弹层 -->
				<el-dialog title="新增学科" :visible.sync="dialogFormVisible" width="40%" top="8vh">
					<el-form label-width="120px" :model="form" :rules="rules" ref="form">
						<el-form-item label="学科：" prop="name">
							<el-input v-model="form.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="是否显示：" prop="isShow">
							<el-switch v-model="form.isShow" :active-value="0" :inactive-value="1"></el-switch>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="handleCancel">取 消</el-button>
						<el-button type="primary" @click="handleConfirm">确 定</el-button>
					</div>
				</el-dialog>
				<!-- end -->
			</div>
		</div>
	</body>
	<!-- 引入组件库 -->
	<script src="../js/vue.js"></script>
	<script src="../js/element-ui.js"></script>
	<script src="../plugins/jquery/dist/jquery.js"></script>
	<script src="../js/data.json"></script>
	<script src="../js/base.js"></script>
	<script src="../js/axios-0.18.0.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
				    //分页的信息
					pagination: {
						total: 0,//总数据条数
						pageNum: 1,//当前页数
						pageSize: 10//每页数据条数
					},
					loading: false,
					items: [],//用于展示当前页的学科列表
					baseData: base,
					requestParameters: {
						name: '',//表示学科名称
						status: ''//表示显示状态
					},
					dialogFormVisible: false,
					form: {
						id: null,
						name: '',
						isShow: 0
					},
					rules: {
						name: [{
							required: true,
							message: '请填写',
							trigger: 'blur'
						}]
					}
				}
			},
			created() {
				this.getList()
			},
			filters: {
				dateTransform: (value) => {
					let index = value.lastIndexOf('.');
					return value.substr(0, index);
				}
			},
			methods: {
				// 学科分页列表
				//这个方法，就是发送异步请求，获取学科列表;这个方法在created钩子函数中执行
				//还要在添加成功之后执行
				//还要在点击搜索的时候执行
				getList() {
					// 必传参数
					let params = {
                        currentPage: this.pagination.pageNum,//当前页数
                        pageSize: this.pagination.pageSize,//每页数据条数
                        queryParams:this.requestParameters //查询的条件 -->它里面还有俩键值对
                    };

					//发送异步请求获取学科列表


					// 服务器要响应什么数据给我们呢? rows 和 total 要组成一个对象   ----->Result对象的result属性
				    //其中total表示总数据条数，而rows表示查询到的当前页的学科集合
					//将rows赋值给vue中的items，将total赋值给pagination里面的total属性
					axios.post("/course/findByPage.do",params).then(response=>{
						//判断是否查询成功
                        if (response.data.flag) {
                            //查询成功
							this.$message.success(response.data.message)
							//将rows赋值给vue中的items，将total赋值给pagination里面的total属性
							this.pagination.total = response.data.result.total
							this.items = response.data.result.rows
                        }else {
                            this.$message.error(response.data.message)
						}
					})
				},
				// 清除
				handleRest() {
					if (this.$refs['requestParameters']) {
						this.$refs['requestParameters'].resetFields();
					}
				},
				// 搜索
				handleSearch() {
					this.getList();
				},
				handleSizeChange(val) {
					this.pagination.pageSize = val;
					this.pagination.pageNum = 1;
					this.getList();
				},
				handleCurrentChange(val) {
					this.pagination.pageNum = val;
					this.getList();
				},
				// 学科目录
				goToCatalogView(row) {
					window.location.href = "catalogList.html?courseId=" + row.id;
				},
				// 学科标签
				goToTagView(row) {
					window.location.href = "tagList.html?courseId=" + row.id;
				},
				// 新增学科
				handleCreate() {
					if (this.$refs['form']) {
					    //重置表单数据
						this.$refs['form'].resetFields();
					}
					//弹出那个框
					this.dialogFormVisible = true;
				},
				// 修改学科
				handleUpdate(row) {
				    //此时row就是当前行的数据
					if (this.$refs['form']) {
					    //重置表单
						this.$refs['form'].resetFields();
					}
					//设置form中的id，name和isShow
					this.form.id = row.id;
					this.form.name = row.name;
					this.form.isShow = row.isShow;

					//让修改框显示出来
					this.dialogFormVisible = true;
				},


				//点击确定的时候调用的方法
				handleConfirm() {
				    //表单的id是否为0或者null
					if (this.form.id) {
						//表示有学科id，表示这个学科已经存在了，那么就是修改
						this.handleUpdateConfirm();
					} else {
					    //如果为0，或者null,表示这个学科不存在，那么就是添加
						this.handleCreateConfirm();
					}
				},


                //这里就是真正发送添加学科的请求的方法
				handleCreateConfirm() {
				    //校验表单
					this.$refs['form'].validate((valid) => {
						if (valid) {

						    //校验通过
							let params = this.form;//封装请求参数

							//发送异步请求，添加学科信息
							axios.post("/course/add.do",params).then(response=>{
                                if (response.data==0) {
									//说明，响应数据中，没有flag；也就是用户 权限不足
									this.$message.error("用户权限不足，请切换用户")
                                    this.dialogFormVisible = false;//让弹框消失
                                }else {
									//如果权限不足的话，我们根本获取不到response.data.flag
									if (response.data.flag) {
										//添加成功
										this.$message.success(response.data.message)
										//添加成功，我们要让那个弹出框消失
										this.dialogFormVisible = false;
										//查询所有学科信息
										//TODO
										this.getList()
									}else {
										//添加失败
										this.$message.error(response.data.message)
									}
								}
							})
						}
					});
				},
				// 修改学科确定
				handleUpdateConfirm() {
					this.$refs['form'].validate((valid) => {
						if (valid) {
							let params = this.form;
							//发送异步请求，更新学科信息
							axios.post("/course/update.do",params).then(response=>{
                                if (response.data.flag) {
                                    //修改成功
									//隐藏弹框
                                    this.dialogFormVisible = false;
                                    //查询所有学科
									this.getList()
                                }
                                //无论成功或者失败，都要弹出消息提示
								this.$message({
									message:response.data.message,
									type:response.data.flag ? "success" : "error"
								})
							})
						}
					});
				},
				// 新增/修改学科取消
				handleCancel() {
					this.dialogFormVisible = false;
				},
				// 删除学科
				handleDeleted(row) {
				    //弹出一个确认框
					this.$confirm('此操作将永久删除'+row.name+'学科, 是否继续?', '提示', {
						type: 'warning'
					}).then(() => {
					    //点击确定时候的回调函数
						//向服务器发送异步请求，根据学科的id，删除学科信息
						axios.get("/course/delete.do?id="+row.id).then(response=>{
                            if (response.data.flag) {
                                //删除成功
                                this.$message.success(response.data.message);
                                this.getList();
                            }else {
                                //删除失败
                                this.$message.error(response.data.message);
							}
						})
					}).catch(() => {
					    //点击取消时候的回调函数
						this.$message.info('已取消操作!')
					});
				}
			}
		})
	</script>
</html>
